<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #outer_conter{
         width: 500px;
         height: 20px;
         border-radius: 30px;
         border: 2px solid brown ;
         margin: 200px auto;
    }
    
   #span{
        margin: 200px auto;
        
   } 
</style>
<script src="./jquery.js"></script>
<body>
    <div id="outer_conter">
        <div id="inner"></div>
    </div>
    <span id="span">span</span>
    <button id="btn">开始加载</button>
    <script>
       $("#btn").click(()=>{
           $("#inner").css({
               "width":0,
               "height":20,
               "background":"blue",
               "border-radius":30
           }).animate({
            width:"500px",
        
       },10000);

       $("#span").text(
           $("#inner").width()
       );
       

       })
    </script>
</body>
</html>